<template>
  <div class="pages-project">
    <page-cover
      title="开源&项目🍟"
      subtitle="为开源尽一份力~"
      bg="https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/89b84812517a43f884c71b489ede0092.png"
    ></page-cover>

    <main>
      <div v-loading="loading" class="project-list">
        <project-item :lists="projectList"></project-item>
      </div>
    </main>
  </div>
</template>

<script>
import projectItem from "@/components/project-item/project-item.vue";
import pageCover from "@/components/page-cover/page-cover";
export default {
  name: "WorkspaceJsonHome",
  components: {
    projectItem,
    pageCover,
  },
  data() {
    return {
      projectList: [],
      loading: true,
    };
  },

  mounted() {
    this.getProjectList();
  },

  methods: {
    getProjectList() {
      this.$http("getProjectList", { pageSize: 20 }).then((res) => {
        this.projectList = res.data.lists;
        setTimeout(() => {
          this.loading = false;
        }, 600);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pages-project {
  cursor: pointer;
}

main {
  max-width: 1000px;
  margin: -80px auto 0;
  position: relative;
  z-index: 2;
  .project-list {
    min-height: 20vh;
    padding: 100px 10px 90px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    border-radius: 6px;
  }
}

@media (max-width: 550px) {
  .project-list {
    padding-top: 50px !important;
  }
}
</style>
